<template>
  <view>
    <u-navbar height="50" title="订单详情" title-size="36" title-color="#333"></u-navbar>
    <view class="layoutView">
      <view class="orderStatus" v-if="infoStatus == 40">已取消</view>
      <view class="orderStatus" v-if="infoStatus == 0">待接单</view>
      <view class="orderStatus" v-if="infoStatus == 10">待发货</view>
      <view class="orderStatus" v-if="infoStatus == 11">待客户收货</view>
      <view class="orderStatus" v-if="infoStatus == 12">客户申请退款</view>
      <!-- <view class="orderStatus" v-if="orderInfo.status == 30 && orderInfo.commentStatus" >客户已评价</view> -->
      <view class="orderStatus" v-if="infoStatus == 14">已完成</view>
      <view class="orderStatus" v-if="infoStatus == 20">已拒绝</view>
      <view class="" style="font-size: 28rpx; line-height: 50rpx">
        <view class="order-address">
          {{ orderInfo.receiverDetailAddress }}
        </view>
        <view class="order-contacts">
          {{ orderInfo.receiverName }}&nbsp;&nbsp;{{ orderInfo.receiverMobile }}
        </view>
        <view class="mer-chat"> </view>
      </view>
    </view>
    <view class="layoutView">
      <view class="layoutText">商品信息</view>
      <view class="order-goods" v-for="item2 in goodsList" :key="item2.id">
        <u-icon class="goods-img" :name="item2.picUrl" size="160"></u-icon>
        <view class="orde-riget">
          <view class="goods-title">
            {{ item2.spuName }}
          </view>
          <view class="goods-speci">
            <text class="goods-num">x{{ item2.count }}</text>
          </view>
          <view class="goods-price"> ¥{{ item2.price * 0.01 }} </view>

          <view @click="onApply(item2)" v-if="item2.afterSaleStatus == 0" class=""> 退款申请 </view>
          <view v-else @click="onAfterDetail(item2.afterSaleId)" class=""> 退款详情 </view>
        </view>
      </view>
      <u-line color="#E3E4E6"></u-line>
      <view class="moneyView">
        <view class="moneyTitle">
          <view>商品总价</view>
        </view>
        <!-- <view class="moneyText">¥{{ipriceTotal * 0.01}}</view> -->
      </view>
      <u-line color="#E3E4E6"></u-line>
      <view class="moneyView" v-if="orderInfo.deliveryPrice > 0">
        <view class="moneyTitle">
          <view>配送费用</view>
        </view>
        <view class="moneyText" v-if="Number(orderInfo.deliveryPrice) > 0"
          >¥{{ orderInfo.deliveryPrice * 0.01 }}</view
        >
        <view class="moneyText" v-else>包邮</view>
      </view>
      <u-line color="#E3E4E6"></u-line>
      <view class="allPriceView">
        <text class="allTitle">共{{ orderInfo.productCount }}件 实际支付：</text>
        <text class="allPrice" style="color: red">¥{{ orderInfo.payPrice * 0.01 }}</text>
      </view>
    </view>

    <view class="layoutView" v-if="orderInfo">
      <view class="orderTitle">订单信息</view>
      <view class="orderText">交易单号：{{ orderInfo.no }}</view>
      <view class="orderText">创建时间：{{ orderInfo.createTime }}</view>
      <view class="orderText" v-if="orderInfo.distribution_type == 1">订单类型：配送到家</view>
      <view class="orderText" v-if="orderInfo.distribution_type == 2">订单类型：到店自提</view>
      <view class="orderText" v-if="orderInfo.remark">订单备注：{{ orderInfo.remark }}</view>
      <view v-if="orderInfo.distribution">
        <view class="orderText" v-if="orderInfo.distribution.express_company">
          物流公司：{{ orderInfo.distribution.express_company }}</view
        >
        <view class="orderText" v-if="orderInfo.distribution.express_number">
          <view style="flex: 1">快递单号：{{ orderInfo.distribution.express_number }}</view>
          <view @click="onCopy(orderInfo.distribution.express_number)">复制</view>
        </view>
      </view>
    </view>
    <u-gap height="100"></u-gap>
    <view class="bottomView">
      <text
        class="hollow-btn"
        v-if="orderInfo.status == 0"
        @click.stop.prevent="onMerCancel(orderInfo)"
        >拒绝订单</text
      >
      <text
        class="hollow-btn"
        v-if="orderInfo.status == 0"
        @click.stop.prevent="onMerConfirm(orderInfo)"
        >接受订单</text
      >
      <text
        class="solid-btn"
        v-if="orderInfo.status == 10"
        @click.stop.prevent="onMerExpress(orderInfo)"
        >立即发货</text
      >
      <text
        class="hollow-btn"
        @click="onExpress"
        v-if="orderInfo.status == 20 || orderInfo.status == 30"
        >查看物流</text
      >
      <text class="solid-btn" v-if="orderInfo.status == 20" @click.stop.prevent="onMerAfter()"
        >查看售后</text
      >
    </view>

    <PayPopup :show="show" :payOrderId="payOrderId" :resStatus="resStatus">
      <p style="font-size: 50rpx; font-weight: 600; padding: 20rpx; text-align: center">
        ¥{{ realPay }}
      </p>
    </PayPopup>
  </view>
</template>

<script>
import PayPopup from '@/components/PayPopup.vue'
export default {
  components: {
    PayPopup
  },
  data() {
    return {
      merOrderId: '',
      show: false,
      show2: false,
      orderId: '',
      infoStatus: '',
      orderInfo: {
        status: 1
      },
      resStatus: '',
      payOrderId: '',
      realPay: '',
      fileList: [],
      starNum: [1, 2],
      starNum2: [1, 2, 3],
      goodsList: [],
      leval: ''
    }
  },
  onLoad(res) {
    this.orderId = res.id ? res.id : ''
    if (this.starNum.length < 2) {
      this.leval = '差'
    } else if (this.starNum.length < 4) {
      this.leval = '一般'
    } else {
      this.leval = '优秀'
    }
  },
  onShow() {
    this.initData()
  },
  computed: {
    // priceTotal: function(){
    // 	let price = 0
    // 	this.goodsList.forEach(item=>{
    // 		price += item.price
    // 	})
    // 	return price
    // }
  },
  methods: {
    initData() {
      this.$u.get('/app-api/shop/trade-order/get-detail', { id: this.orderId }).then((res) => {
        this.orderInfo = res.data.order
        this.goodsList = res.data.order.items
        this.infoStatus = res.data.status
      })
    },
    onLocation(store) {
      uni.openLocation({
        latitude: Number(store.address_lat),
        latitude: Number(store.address_lng),
        success() {}
      })
    },
    onCallPhone(store) {
      uni.makePhoneCall({
        phoneNumber: store.phone,
        fail(res) {
          uni.$u.toast(JSON.stringify(res))
        }
      })
    },
    onComment() {
      this.show = true
    },
    onCopy(number) {
      let self = this
      uni.setClipboardData({
        data: number,
        success: function () {
          self.$u.toast('复制成功')
        }
      })
    },

    onMerConfirm() {
      uni.dialog.confirm('温馨提示', '确认接单？', () => {
        this.$u.put('/app-api/shop/trade-order/accept', { id: this.orderId }).then(() => {})
      })
    },

    onMerExpress() {
      this.$utils.route('/other/express/express?id=' + this.orderInfo.id + '&status=1')
    },
    onMerCancel(e) {
      uni.dialog.confirm('温馨提示', '拒绝该订单？', () => {
        this.$u.put('/app-api/shop/trade-order/refuse', { id: this.orderId }).then(() => {})
      })
    },

    onAfterDetail(id) {
      this.$utils.route('/other/after-sales/after-sales?id=' + id)
    }
  }
}
</script>

<style scoped>
@import url('../../style/btn.css');
page {
  background: #f2f2f2;
}

.layoutView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 10rpx;
  margin: 20rpx;
  padding: 20rpx;
}

.orderStatus {
  font-size: 42rpx;
  font-weight: 400;
  color: #333333;
  margin-bottom: 20rpx;
}

.order-address {
}
.mer-chat {
  padding: 8rpx 0;
  border-top: #ededed solid 2rpx;
  margin-top: 10rpx;
  display: flex;
}

.layoutText {
  font-size: 30rpx;
  font-weight: 400;
  color: #333333;
  margin-top: 20rpx;
}

.order-goods {
  display: flex;
}

.goods-img {
  border-radius: 20rpx;
}

.orde-riget {
  width: 100%;
  margin-left: 10rpx;
  line-height: 55rpx;
  font-size: 26rpx;
}

.goods-speci {
  position: relative;
}

.goods-num {
  position: absolute;
  top: 0;
  right: 0;
  color: #999999;
}
.goods-price {
  font-size: 30rpx;
  color: #f54831;
}

.locationView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 10rpx;
  padding-bottom: 20rpx;
}

.address {
  flex: 1;
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
  margin-left: 10rpx;
}

.codeView {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30rpx;
}

.codeTitle {
  font-size: 30rpx;
  font-weight: 500;
  color: #333333;
}

.codeNumber {
  font-size: 60rpx;
  font-weight: bold;
  color: #333333;
  margin-top: 10rpx;
  margin-bottom: 30rpx;
}

.codeText {
  font-size: 24rpx;
  font-weight: 400;
  color: #ffbd0b;
}

.goodsView {
  display: flex;
  flex-direction: row;
  padding: 20rpx 0px;
}

.goodsIcon {
  width: 150rpx;
  height: 150rpx;
  background: #bee4fa;
  border-radius: 10rpx;
}

.goodsData {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20rpx;
}

.goodsName {
  display: flex;
  flex-direction: row;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.skuView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.goodsSku {
  flex: 1;
  font-size: 26rpx;
  font-weight: 400;
  color: #999999;
}

.goodsNum {
  font-size: 26rpx;
  font-weight: 400;
  color: #999999;
}

.goodsPrice {
  font-size: 30rpx;
  font-weight: 400;
  color: #e60012;
}

.moneyView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 30rpx 0px;
}

.moneyTitle {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
  display: flex;
  flex-direction: column;
}

.moneyTitle text {
  font-size: 22rpx;
  color: #999;
}

.moneyText {
  font-size: 28rpx;
  color: #333333;
}

.allPriceView {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding: 30rpx 0px;
}

.allPrice {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.orderView {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.orderView text {
  font-size: 32rpx;
  font-weight: 400;
  color: #fb391d;
}

.orderTitle {
  font-size: 30rpx;
  font-weight: 400;
  color: #333333;
  margin-bottom: 10rpx;
}

.orderText {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  margin-top: 10rpx;
}

.bottomView {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 96rpx;
  background: #ffffff;
  box-shadow: 0px -3px 10px 0px rgba(153, 153, 153, 0.1);
  position: fixed;
  bottom: 0px;
  padding: 0 20rpx;
}

.itemBtn2 {
  width: 180rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border: 1px solid #e6e6e6;
  border-radius: 35rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #666666;
  margin-right: 20rpx;
}

.popup-box {
  padding: 20rpx;
}

.popup-title {
  font-size: 36rpx;
  text-align: center;
}

.goods-start {
  border-top: #ededed solid 2rpx;
  border-bottom: #ededed solid 2rpx;
  padding: 30rpx 0;
  margin: 20rpx 0;
  display: flex;
  align-items: center;
}

.start-bar {
  display: inline-block;
  margin: 0 45rpx;
}

.start {
  margin: 0 13rpx;
}

.image-group {
  margin-bottom: 100rpx;
  padding-bottom: 15rpx;
  border-bottom: #ededed solid 2rpx;
}
</style>
